<template>
	<view class="login-wrap">
		<view class="login-header" :style="[headerstyle]">
			<view class="dl_img_wrap">
				<image :src="$z.imgsrc('logo.png')" class="dl_img_logo"></image>
				<view class="logo-text">欢迎登陆</view>
			</view>
			<view class="login-text-wrap">
				<view class="login-text">你好，欢迎使用</view>
				<view class="login-text">移动端商城管理系统</view>
			</view>
		</view>
		<view class="form-wrap">
			<u--form labelPosition="left" :model="data" :rules="rules" ref="uForm">
				<u-form-item prop="username" borderBottom ref="item1" label="账号" label-width="60px">
					<u--input v-model="data.username" placeholder="请输入登录账号" border="none"></u--input>
				</u-form-item>
				<u-form-item prop="username" borderBottom ref="item1" label="密码" label-width="60px">
					<u--input v-model="data.password" placeholder="请输入密码" border="none"></u--input>
				</u-form-item>
				<u-form-item>
					<view class="protocol-wrap">
						<u-checkbox-group v-model="agree" placement="column">
							<u-checkbox>
							</u-checkbox>
						</u-checkbox-group>
						<text class="protocol-text" @tap="toProtocol">《用户服务协议》</text>
					</view>
				</u-form-item>
				<button @click="login" style="padding: 0">
					<span class="btn-text">登录</span>
				</button>
			</u--form>
			<!-- <uni-forms ref="baseForm" :modelValue="data" :rules="rules">
				<uni-forms-item name="username">
					<input type="text" v-model="data.username" placeholder="请输入登录账号"
						:placeholderStyle="placeholderStyle" maxlength="30" style="background: #f3f5f8" />
				</uni-forms-item>
				<uni-forms-item name="password">
					<input type="password" v-model="data.password" placeholder="请输入密码"
						:placeholderStyle="placeholderStyle" maxlength="30" style="background: #f3f5f8" />
				</uni-forms-item>
				<uni-forms-item>
					<view class="protocol-wrap">
						<uni-data-checkbox style="margin-top: 3px; width: auto" v-model="agree" multiple :localdata="[
      {
        text: '',
        value: 0,
      },
    ]">
						</uni-data-checkbox>
						我已阅读并同意
						<text class="protocol-text" @tap="toProtocol">《用户服务协议》</text>
					</view>
				</uni-forms-item>
				<button @click="login" style="padding: 0">
					<span class="btn-text">登录</span>
				</button>
			</uni-forms> -->
		</view>
		<!-- <verifyslide ref="verifyslide" @success="verifySuccess"></verifyslide> -->
	</view>
</template>

<script>
	import qs from "qs";
	// import verifyslide from "./components/VerifySlide.vue";
	import {
		setToken,
		setRefreshToken,
		setUserInfo
	} from "@/config/storage";
	import {
		weBtoa
	} from "@/z/function/btoa.js";
	import {
		service
	} from "@/config/request.js";
	export default {
		// components: {
		// 	verifyslide,
		// },
		data() {
			return {
				agree: [],
				headerstyle: {
					backgroundImage: `url(${uni.$z.imgsrc("crm/zc_img_bj.png")})`,
				},
				loading: false,
				data: {
					username: "",
					password: "",
				},
				rules: {
					username: [{
						required: true,
						message: '请输入登录账号',
						trigger: ['blur', 'change']
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					}]
				},
			};
		},
		computed: {
			btndisabled() {
				for (let i in this.data) {
					if (this.data[i] == "") {
						return true;
					}
				}
				return false;
			},
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
		methods: {
			toProtocol() {
				wx.downloadFile({
					// 示例 url，并非真实存在
					url: `${uni.$z.imgsrc("电商平台用户注册及服务协议.docx")}`,
					success: function(res) {
						const filePath = res.tempFilePath;
						wx.openDocument({
							filePath: filePath,
							success: function(res) {
								console.log("打开文档成功");
							},
						});
					},
				});
			},
			verifySuccess(params) {
				let data = {
					// code: params.captchaVerification,
					grant_type: "password",
					// randomStr: "blockPuzzle",
					scope: "server",
					...this.data,
				};
				data.grant_type = "password";
				data.scope = "server";

				const basicAuth = "Basic Y3VzdG9tOmN1c3RvbQ=="
				// "Basic " + weBtoa("pig:pig");
				console.log(basicAuth, "basicAuth");
				// Session.set('basicAuth', basicAuth);
				// 密码加密
				const encPassword = data.password
				// this.$z.ase2(data.password, "pigxpigxpigxpigx");
				let {
					username,
					randomStr,
					code,
					grant_type,
					scope,
					password
				} = data;
				service({
					path: `/auth/oauth2/token?${qs.stringify({username,grant_type, scope},)}`,
					method: "post",
					params: {
						password: encPassword,
					},
					needDeepData: false,
					header: {
						skipToken: true,
						Authorization: basicAuth,
						"Content-Type": "application/x-www-form-urlencoded", //自定义请求头信息
					},
				}).then((res) => {
					setToken(res["access_token"]);
					setUserInfo(res);
					setRefreshToken(res["refresh_token"]);
					uni.switchTab({
						url: "/pages/home/index",
					});
				});
				console.log(
					basicAuth,
					encPassword,
					username,
					randomStr,
					code,
					grant_type,
					scope,
					"params"
				);
			},
			async login() {
				this.$refs.uForm.validate().then(res => {
					if (this.agree.length === 0) {
						return uni.showToast({
							icon: "none",
							title: "请阅读并勾选服务协议",
							duration: 2000,
						});
					}
					this.verifySuccess();
				}).catch(errors => {
					uni.$u.toast('校验失败')
				})

			}
		},
	};
</script>

<style lang="scss" scoped>
	input {
		line-height: 99rpx !important;
		height: 99rpx !important;
		font-size: 14px !important;
		padding-left: 10px;
	}

	.form-wrap {
		padding: 20rpx;
		min-height: 100%;
	}

	.login-header {
		height: 575rpx;
		background-color: #dc2626;

		background-size: 100% auto;
		width: 100%;
		padding: 114rpx 54rpx 0;
	}

	.dl_img_wrap {
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}

	.dl_img_logo {
		width: 180rpx;
		height: 70rpx;
		margin-right: 16rpx;
	}

	.logo-text {
		width: 116rpx;
		height: 36rpx;
		background: #ffffff;
		border-radius: 4rpx;
		font-size: 23rpx;
		color: #dc2626;
		line-height: 36rpx;
		text-align: center;
		align-self: flex-end;
	}

	.login-text-wrap {
		margin-top: 107rpx;
	}

	.login-text {
		font-weight: bold;
		font-size: 40rpx;
		color: #ffffff;
		line-height: 60rpx;
	}

	.form-wrap {
		height: calc(100vh - 575rpx);
		background: #ffffff;
		padding: 90rpx 54rpx 0;
		position: relative;
		top: -15px;
		border-radius: 20px 20px 0 0;
	}

	.btn-text {
		display: block;
		background: #dc2626;
		color: #ffffff;
		font-weight: 500;
		font-size: 32rpx;
		line-height: 90rpx;
	}

	.protocol-wrap {
		font-size: 26rpx;
		color: #181a1e;
		line-height: 34rpx;
		display: flex;
		align-items: center;


	}

	.protocol-text {
		font-size: 26rpx;
		color: #3e7afd;
	}

	::v-deep {
		.checkbox__inner {
			// border: 2px solid #cecece !important;
			// border-radius: 50% !important;
			background: transparent !important;
		}

		.is-checked {
			.checkbox__inner {
				border: 2px solid #dc2626 !important;
				// border-radius: 50% !important;
				background: #dc2626 !important;
				text-align: center;

				.checkbox__inner-icon {
					top: 1px !important;
					left: 3px !important;
					height: 6px !important;
					width: 4px !important;
				}
			}
		}
	}
</style>